import QtQuick 2.0
import QtQuick.Controls 2.14

import "../../basic"

Item {
    id: cloundMusicCherryPickRoot
    Item {
        anchors.fill: parent
        anchors.leftMargin: 36
        anchors.topMargin: 24

        Flow {
            id: titleFlow
            anchors.left: parent.left
            anchors.top: parent.top
            height: 25
            spacing: 20
            Repeater {
                id: selectorRep
                anchors.fill: parent
                model: [ "精选", "歌单广场", "排行榜", "歌手" ]
                property int selectedIndex: 0
                Item {
                    height: 40
                    width: selectorLabel.implicitWidth + 10
                    Label {
                        id: selectorLabel
                        text: modelData
                        font.pixelSize: 20
                        font.bold: true
                        font.family: BasicConfig.commFont
                        anchors.centerIn: parent
                        color:"#b9b9ba"
                    }
                    Rectangle {
                        visible: selectorRep.selectedIndex === index
                        anchors.left: selectorLabel.left
                        anchors.right: selectorLabel.right
                        anchors.top: selectorLabel.bottom
                        anchors.leftMargin: selectorLabel.implicitWidth / selectorLabel.font.pixelSize * 2
                        anchors.rightMargin: selectorLabel.implicitWidth / selectorLabel.font.pixelSize * 2
                        anchors.topMargin: 3
                        height: 3
                        color: "#eb4d44"
                    }
                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            if (selectorRep.selectedIndex === index) {
                                selectorLabel.color = "white"
                            } else {
                                selectorLabel.color = "#b9b9ba"
                            }
                            cursorShape = Qt.PointingHandCursor
                        }
                        onExited: {
                            if (selectorRep.selectedIndex === index) {
                                selectorLabel.color = "white"
                            } else {
                                selectorLabel.color = "#a1a1a3"
                            }
                            cursorShape = Qt.ArrowCursor
                        }
                        onClicked: {
                            selectorRep.selectedIndex = index;
                            // Label 恢复默认颜色
                            for (let i = 0; i < selectorRep.count; ++i) {
                                if (i !== index) {
                                    let item = selectorRep.itemAt(i);
                                    for (let j = 0; j < item.children.length; ++j) {
                                        if (item.children[j] instanceof Label) {
                                            item.children[j].color = "#b9b9ba"
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        StackView {
            id: cloudMusicChrryPickStackView
            anchors.top: titleFlow.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.topMargin: 20
            anchors.leftMargin: -36
            clip: true
            initialItem: "qrc:/Src/rightPage/stackPages/cloudMusicCherryPick/CherrtPick.qml"
        }

    }
}
